<template>
  <div>
    <!-- 登录导航 -->
    <van-nav-bar title="登录" class="navbar" />
    <!-- 表单组件 -->
    <van-form @submit="onSubmit" class="form" ref="form">
      <!-- 用户名 -->
      <van-field
        v-model="mobile"
        name="mobile"
        label="用户名"
        placeholder="请输入手机号"
        :rules="mobileRules"
      >
        <!-- 看文档，里面slots插槽名称label名字，用template包裹里面需要传递的内容 -->
        <template #label>
          <span class="toutiao toutiao-shouji1"></span>
        </template>
      </van-field>
      <!-- 验证码，密码 -->
      <van-field
        v-model="code"
        name="code"
        placeholder="请输入验证码"
        :rules="codeRules"
      >
        <template #label>
          <span class="toutiao toutiao-yanzhengma"></span>
        </template>
        <template #button>
          <van-button
            type="default"
            class="code-btn"
            round
            native-type="button"
            @click="getCode"
            v-if="isShowCodeBtn"
            >获取验证码</van-button
          >
          <!-- format调整显示的格式 -->
          <van-count-down
            :time="3 * 1000"
            v-else
            format="ss秒"
            @finish="isShowCodeBtn = true"
          />
        </template>
      </van-field>
      <!-- 提交按钮，会触发submit事件，input的提交按钮也会触发submit事件 -->
      <div style="margin: 16px">
        <van-button block type="info" native-type="submit">提交</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { loginAPI, getCodeAPI } from '@/api'
// 引入vuex
import { mapMutations } from 'vuex'
export default {
  data() {
    // 验证规则在vant文档里面又tigger两个样式,如果不写的化默认是onblur事件
    const mobileRules = [
      { required: true, message: '请填写验证码' },
      {
        pattern:
          /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/,
        message: '请输入正确的手机号'
      }
    ]
    const codeRules = [
      { required: true, message: '请填写验证码' },
      {
        pattern: /^[0-9]{6}$/,
        message: '请输入正确的验证码'
      }
    ]
    return {
      mobile: '',
      code: '',
      mobileRules,
      codeRules,
      // 是否显示验证码的按钮
      isShowCodeBtn: true
    }
  },
  methods: {
    // 展开mapMutations
    ...mapMutations(['SET_TOKEN']),
    async onSubmit() {
      // vant组件已经给我们做了表单验证，所以如果格式不对的化就不会触发submit事件
      // 解构赋值
      const { mobile, code } = this
      // 提示加载中信息弹出框
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true
      })
      // 登陆成功和失败都给客户显示提示
      try {
        // 拿到数据发送请求给后端，用到axios，下载和配置
        const { data } = await loginAPI(mobile, code)
        // 当我们第一次登录的时候，会返回一个身份证，把这个数据保存到vuex，本地保存不会映射，一直都是本地的数据
        this.SET_TOKEN(data.data)

        // 登陆成功跳转页面
        this.$router.push('/profile')

        // 登陆成功了以后提示登陆成功
        this.$toast.success('登录成功')
      } catch (error) {
        // 区分分以下是网咯错误还是原生的错误,当我们的promise调用resolve的时候我们返回的数据在res.data里面，如果调用的是reject函数的时候，返回的数据在res.response里面
        // ? . 是es11的语法，如果前面的只是undefined就不会再取后面的值直接返回前面的值的状态，undefined是false就会执行else语句
        if (error.response?.status === 400) {
          this.$toast.fail(error.response.data.message)
        } else {
          // 如果是js原生错误的花就把错误抛到浏览器
          throw error
        }
      }
    },
    // 每个表单里面的button都会触发submit事件，所以要解决这个会触发的事件，vant给了我们解决的办法
    async getCode() {
      // 只要我们点击就会触发这个事件并且请求验证码，但是在请求验证码之前我们需要先验证是否输入手机号，手机号输入的是否正确，vant也给了我们解决方案，给表单绑定一个ref,再调用ref上的方法
      await this.$refs.form.validate('mobile')
      // 当我们在获取验证码的时候获取验证码的按钮不显示并且倒计时
      this.isShowCodeBtn = false
      // 获取完验证码以后让我们的获取验证码按钮显示，看vant组件库
      // 在发送请求之前提示一下用户在获取验证码中
      this.$toast.loading({
        message: '获取验证中...',
        forbidClick: true // 禁止点击所有页面
      })
      // 发送请求并且捕获错误
      try {
        await getCodeAPI(this.mobile)
        this.$toast.success('获取验证码成功')
      } catch (error) {
        if (error.response?.status === 429) {
          this.$toast.fail(error.response.data.message)
        }
      }
    }
  }
}
</script>

<style scoped lang="less">
.navbar {
  background-color: rgb(50, 150, 250);
  :deep(.van-nav-bar__title) {
    color: #fff;
  }
}
:deep(.form) {
  // 设置字体图标的大小
  .toutiao {
    font-size: 40px;
  }
  .van-field__label {
    flex: 1;
  }
  .van-cell__value {
    flex: 20;
  }
  .code-btn {
    background-color: #eee;
    color: #9a8b7e;
    height: 0.64rem;
  }
}
</style>
